<!--
 * @Description: 数据佐证资料
 * @Author: qingyang
 * @Date: 2023-11-10 17:08:41
 * @LastEditors: qingyang
 * @LastEditTime: 2023-11-13 15:29:47
-->
<template>
  <CDialog
    :title="`${detailData?.nodeName}-数据佐证资料`"
    size="small"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    @cancel="dialogVisible = false"
    :show-cancel-button="changed"
    :loading="loading"
    :confirm-text="changed ? '保存' : '关闭'"
  >
    <div class="edit-op-container" v-if="dialogVisible">
      <div v-if="readOnly && fileList.length == 0">暂无数据佐证资料</div>
      <g-upload
        :disabled="readOnly"
        :action="uploadFilePostUrlV3"
        :postParams="{
          groupType: 'SUPPLIER_FORM_OTHER',
          scope: 'footprint',
          needRename: false
        }"
        :show-file-list="true"
        previewByApi
        :limit="12"
        :file-list="fileList"
        @success="handleUploadSuccess"
        @remove="handleRemove"
      >
        <template #default="{ loading: btnLoading }">
          <el-button :loading="btnLoading"
            ><CIcon type="c-xian-shangchuan" class="g-mr4"></CIcon>上传文件</el-button
          >
        </template>
        <template #tip>
          <div class="g-ml10" style="display: inline-block">
            <span class="g-font-12n3">*单个文件不超过20M</span>
          </div>
        </template>
      </g-upload>
    </div>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'MaterialDialog'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref, watch } from 'vue';
import { CDialog } from '@/components/CDialog/index';
import { uploadFilePostUrlV3 } from '@/apis/common/common';
import type { UploadFile } from 'element-plus/es/components/upload/src/upload';
import { useMessage } from '@/hooks/useMessage';
import { GUpload } from '@/components/GUpload';
import { getManufactureData, editManufactureData } from '@/apis/todo/flowBusiness';
import { GetListManufactureResult } from '@/apis/todo/model/flowBusinessModel';
interface SelectFillTypeDialogProps {
  visible: boolean;
  nodeNo: string;
  formNo: string;
  readOnly: boolean;
}
const props = withDefaults(defineProps<SelectFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible', 'refresh']);
const { createMessage } = useMessage();
const fileList = ref<any[]>([]);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch(
  () => dialogVisible.value,
  visible => {
    if (visible) {
      getData(props.nodeNo);
    } else {
      fileList.value = [];
    }
  }
);

// 是否修改过
const changed = ref(false);
const detailData = ref<GetListManufactureResult>();
async function getData(nodeNo: string) {
  changed.value = false;
  try {
    const res = await getManufactureData(nodeNo);
    detailData.value = res ?? {};
    fileList.value = res.supplierFormAttachmentList.map(item => {
      return {
        ...item,
        url: item.attachmentUrl,
        name: item.attachmentName
      };
    });
  } catch (error) {
    console.log('error', error);
  }
}

const handleUploadSuccess = (file: any) => {
  changed.value = true;
  const { name, response } = file;
  if (file.response.msg == '成功') {
    fileList.value.push({
      url: file.response.data.fileUrl,
      name: file.name,
      attachmentId: file.response.data.id,
      attachmentType: 'EVIDENCE'
    });
    createMessage.success('上传成功');
  } else {
    createMessage.info('上传失败');
  }
};
function handleRemove(file: UploadFile, files: any[]) {
  changed.value = true;
  const { status, uid } = file;
  if (status === 'success') {
    fileList.value = files.map(obj => {
      return {
        url: obj.response?.data.fileUrl,
        name: obj.name,
        attachmentId: obj.response?.data.id,
        attachmentType: 'EVIDENCE'
      };
    });
  }
}
const loading = ref(false);
async function handleConfirm() {
  if (changed.value) {
    try {
      loading.value = true;
      await editManufactureData({
        nodeNo: props.nodeNo,
        formNo: props.formNo,
        ...detailData.value,
        supplierFormAttachmentList: fileList.value.map(item => {
          return {
            attachmentUrl: item.url,
            attachmentName: item.name,
            attachmentId: item.attachmentId,
            attachmentType: item.attachmentType
          };
        })
      });
      createMessage.success('保存成功！');
      emit('refresh');
      loading.value = false;
      dialogVisible.value = false;
    } catch (error) {
      console.log('error', error);
      loading.value = false;
    }
  } else {
    dialogVisible.value = false;
  }
}
</script>
